<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AI问诊 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
</head>
<body>
<div id="app" class="container mt-5">
    <h2 class="text-center">AI问诊</h2>
    <a href="/logout" class="btn btn-secondary mb-3">注销</a>
    <div class="card">
        <div class="card-body">
            <div v-for="(msg, index) in messages" :key="index" class="mb-2">
                <div :class="{'text-end': msg.role === 'user'}"
                     class="p-2 rounded"
                     :style="{backgroundColor: msg.role === 'user' ? '#e3f2fd' : '#f8f9fa'}">
                    {{ msg.content }}
                </div>
            </div>
            <div class="input-group mt-3">
                <input v-model="inputMessage" @keyup.enter="sendMessage"
                       type="text" class="form-control" placeholder="输入症状描述...">
                <button @click="sendMessage" class="btn btn-primary">发送</button>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            inputMessage: '',
            messages: []
        },
        methods: {
            sendMessage() {
                if (!this.inputMessage.trim()) return;
                this.messages.push({ role: 'user', content: this.inputMessage });
                axios.post('/api/ai/chat', { message: this.inputMessage })
                    .then(response => {
                        this.messages.push({
                            role: 'assistant',
                            content: response.data.reply
                        });
                    });
                this.inputMessage = '';
            }
        }
    });
</script>
</body>
</html>